<script setup lang='ts'>
interface Props {
  si: number
}

defineOptions({ name: 'AppSportsAllRegionList' })
const props = defineProps<Props>()

const sportsStore = useSportsStore()
const { competitionListData } = storeToRefs(sportsStore)

// 根据球种获取所有地区联赛数据
const params = computed(() => {
  return { si: props.si, kind: 'normal' }
})

/** 定时更新数据 */
const { startTimer, stopTimer } = useSportsDataUpdate(() => sportsStore.runGetCompetitionListData(params.value))

// 所有地区
const allRegionList = computed(() => {
  if (competitionListData.value && competitionListData.value.list)
    return competitionListData.value.list
  return []
})

watch(() => props.si, (a) => {
  if (a !== 0)
    sportsStore.runGetCompetitionListData(params.value)
})

onActivated(() => {
  startTimer()
})
onDeactivated(() => {
  stopTimer()
})
onBeforeUnmount(() => {
  stopTimer()
})

await application.allSettled([sportsStore.runAsyncGetCompetitionListData(params.value)])
</script>

<template>
  <BaseSportsScrollbar class="layer">
    <AppSportsAccordion class="not-last-of-type:mb-[24px]" :si="si" :data="region" v-for="region in allRegionList"
      :key="region.pgid" />
  </BaseSportsScrollbar>
</template>

<style lang='scss' scoped>
.layer {
  color: var(--color-text-white-0);
  width: 100%;
  max-width: 100%;
  background: var(--color-bg-black-3);
  box-shadow: rgba(0, 0, 0, 0.16) 0px 5px 16px;
  box-sizing: border-box;
  max-height: 380px;
  overflow: hidden auto;
  border-radius: 12px;
  padding-top: 28px;
  padding-left: 20px;
  padding-right: 16px;
  padding-bottom: 28px;

  &::after {
    left: 0px;
    width: calc(100% - 12px);
    bottom: 0px;
    height: 24px;
    content: "";
    z-index: 2;
    position: absolute;
    background: linear-gradient(to top, rgb(41, 45, 46), rgba(41, 45, 46, 0));
    pointer-events: none;
  }
}
</style>
